<template>
  <div class="header">
    <div class="header-left">
      <!--      <div class="iconfont back-icon">&#xe665;</div>-->
      <img class="logo" src="/logo.png">
    </div>
    <router-link to="/city" class="header-input">
      <span class="iconfont search-icon">&#xe667;</span>
      输入城市/景点
    </router-link>
    <router-link to="/city">
      <div class="header-right">
        {{ city }}
        <span class="iconfont arrow-icon">&#x100ad;</span>
      </div>
    </router-link>
  </div>
  <!--  <Search :cities="data"></Search>-->
</template>

<script>
import {useStore} from "vuex";
import Search from "@/pages/city/components/Search";
import {ref} from "vue";

export default {
  name: 'Header',
  components: {Search},
  setup(props) {
    const store = useStore()
    const city = store.state.city
    // const data = ref([]);
    // data.value = props;
    return {city}
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/vaibles.styl"
@import "~styles/mixins.styl"
.header
  display: flex
  line-height: $headerHeight
  background $bgColor
  color #ffffff

  .header-left
    width: 1rem
    margin-left .1rem
    float: left

    .back-icon
      text-align center
      font-size .7rem

    .logo
      width 1rem
      height 1rem

  .header-input
    padding-left .3rem
    flex: 1
    color #adadad
    height .9rem
    background #ffffff
    margin-top .13rem
    line-height .9rem
    margin-left .2rem
    font-size .4rem
    border-radius .3rem

    .search-icon
      font-size .4rem

  .header-right
    min-width: 1.4rem
    margin 0 .2rem
    font-size .4rem
    float: right
    text-align center
    color #fff

    .arrow-icon
      margin-left -.1rem
      font-size .4rem
</style>
